import React, { Component } from 'react'
import axios from 'axios'

export default class Movie extends Component {

  // constructor(){
  //   super();
  //   //第一种定义state的方式 （推荐）
  //   this.state ={
  //     name:"误杀"
  //   }
  // }


  state = {
    name: "误杀",
    num: 1,
    cityname: 'beijing',
    datalist: [{
      id: 1,
      name: '误杀'
    }, {
      id: 2,
      name: "猩球崛起"
    }],
    userlist:[]
  }

  render() {
    return (
      <div id="movie">
        城市名称：{this.props.city}
        <br></br>
        num:{this.state.num}
        <br></br>
        电影名称：{this.state.name}

        {
          this.state.cityname === 'beijing' ? <h1>北京</h1> : <h1>太原</h1>
        }

        <ul>
          {
            this.state.datalist.map((item, index) => {
              return (<li key={item.id}>
                index:{index}-
                {item.name}</li>)
            })
          }
        </ul>
        <hr/>
        异步数据：
        <ul>
          {
            this.state.userlist.map((item)=>{
              return <li key={item.id}>{item.firstname +' -' + item.Lastname}</li>
            })
          }
        </ul>

      </div>
    )
  }

  async componentDidMount() {
    // setTimeout(() => {
    //   //会做数据的合并
    //   this.setState({
    //     name: "星球崛起"
    //   })
    // }, 2000)

    //修改数据是异步的
    // this.setState({
    //   name: "星球崛起"
    // })
    // console.log(this.state.name)


    this.setState({
      name: "星球崛起"
    }, () => {
      console.log(this.state.name)
      //推荐
      // console.log(document.getElementById('movie').innerHTML)
    })

    setTimeout(() => {
      console.log(document.getElementById('movie').innerHTML)
      this.setState({
        cityname:'taiyuan'
      })
    }, 3000)

    //错误的数据修改方式
    // this.props.city = "北京"

    let rs = await axios.get('http://localhost:3003/users')
    console.log(rs.data)
    this.setState({
      userlist:rs.data
    })

  }
}
